<!-- 当前信息 -->
<template>
    <div class="q-pa-md bg-white">
        <q-table
            flat
            separator="none"
            :rows="dataList"
            :columns="columns"
            no-data-label="暂无数据"
            no-results-label="过滤器没有发现任何结果"
            row-key="name"
            :visible-columns="visibleColumns"
            v-model:pagination="pagination"
            hide-pagination
            :loading="loading"
        >
            <!-- 表格的加载状态 -->
            <template v-slot:loading>
                <q-inner-loading showing color="grey" />
            </template>
            <!-- 表格顶部 -->
            <template v-slot:top v-if="searchShow">
                <div style="width: 230px" class="q-mt-xs q-mr-sm">
                    <q-select
                        dense
                        options-dense
                        outlined
                        v-model="headerSeach"
                        :options="deviceNameOptions"
                    />
                </div>
                <div v-show="headerSeach" style="width: 200px" class="q-mr-sm q-mt-xs">
                    <q-input
                        outlined
                        v-model="queryList[seachContent[headerSeach]]"
                        placeholder="请输入内容"
                        dense
                    />
                </div>
                <q-btn
                    class="q-mr-sm q-mt-xs borderRadius"
                    unelevated
                    icon="search"
                    padding="8px 8px 7px"
                    color="primary"
                    label="搜索"
                    @click="handlerSearch"
                />
                <q-btn
                    class="q-mr-sm q-mt-xs borderRadius"
                    unelevated
                    color="primary"
                    padding="8px 8px 7px"
                    label="复位搜索"
                    @click="handleResetSearch"
                />
                <q-btn
                    class="q-mr-sm q-mt-xs borderRadius"
                    unelevated
                    padding="8px 8px 7px"
                    color="primary"
                    label="全部标记为已读"
                    @click="readAllClick"
                />
                <q-space />
                <q-select
                    v-model="visibleColumns"
                    multiple
                    outlined
                    dense
                    options-dense
                    :display-value="'表头选择'"
                    emit-value
                    map-options
                    :options="columns"
                    option-value="name"
                    options-cover
                    style="min-width: 150px"
                    class="q-mt-xs q-mr-sm"
                />
            </template>
            <!-- 无数据提示信息 -->
            <template v-slot:no-data="{ message }">
                <div class="full-width row flex-center text-accent q-gutter-sm">
                    <span>{{ message }}</span>
                </div>
            </template>
            <!-- 表格头部 -->
            <template v-slot:header="props">
                <q-tr
                    no-hover
                    :props="props"
                    :class="themeColor.primary == '#FF9F03' ? 'headTr' : `${themeColor.primary == '#004288' ? 'headTrTwo' : 'headTrThree'}`"
                >
                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
                        {{ col.label }}
                        <span v-if="col.isSort" class="sortSpan">
                            <q-icon
                                class="cursor-pointer icon1 text-grey"
                                size="14px"
                                name="bi-caret-up-fill"
                                :class="upSort && col.name == downName ? 'sortIcon' : ''"
                                @click="handlerSortup(col.name)"
                            />
                            <q-icon
                                class="cursor-pointer icon2 text-grey"
                                size="14px"
                                name="bi-caret-down-fill"
                                :class="DownSort && col.name == downName ? 'sortIcon' : ''"
                                @click="handlerSortdown(col.name)"
                            />
                        </span>
                    </q-th>
                </q-tr>
            </template>
            <!-- 表格主体 -->
            <template v-slot:body="props">
                <q-tr no-hover :props="props" class="tableTr">
                    <q-td v-for="col in props.cols" :key="col.name" :props="props">
                        {{ col.value }}
                        <span v-if="col.name == 'cz'">
                            <q-btn
                                size="md"
                                unelevated
                                style="height:31px;margin-top:2px;"
                                padding="0 10px"
                                color="primary"
                                dense
                                @click="readClick(props)"
                            >标记为已读</q-btn>
                        </span>
                    </q-td>
                </q-tr>
            </template>
        </q-table>
        <!-- 分页 -->
        <Pagination
            :pageSizes="['5条/页', '10条/页', '20条/页', '30条/页']"
            @updatePage="updatePage"
            @updateSizes="updateSizes"
            :pagination="pagination"
            @handlerRefresh="handlerRefresh"
        />
    </div>
</template>

<script>
import { ref } from 'vue'
import { getMsgList, addRead, addReadAll } from 'src/api/eventWarn.js'
import Pagination from 'src/components/pagination'
import { mapGetters } from 'vuex';
import drag from 'src/components/mixins/drag.js'
import getNowFormatDate from "src/utils/get-now-format-date"

export default {
    mixins: [drag],
    data() {
        return {
            dataList: [],
            searchShow: false,
            upSort: 1,
            DownSort: 0,
            downName: '',
            // 表格头部
            headerSeach: ref(''),
            deviceNameOptions: ['消息类型', '消息内容'],
            // 右侧表头选择
            visibleColumns: ref([]),
            pagination: { // 分页
                sortBy: 'desc', // 列名
                descending: false, // 是否按照降序排序
                page: 1, // 页码（当前显示第几页的数据）
                rowsPerPage: 10, // 每页多少行
                rowsNumber: 10 // 共多少条
            },
            queryList: {
                page: 1,
                page_size: 10,
                ordering: '-create_time',
                is_read : 0,
            },
            loading: false,
            seachContent: {
                '消息类型': 'title',
                '消息内容': 'content',
            },
        }
    },
    watch:{
        $route(val) {
            if (val && val.path == '/msg') {
                this.handleResetSearch();
            }
        },
    },
    props: {
        columns: {
            type: Array,
            default: null,
        },
    },
    components: {
        Pagination,
    },
    computed: {
        ...mapGetters(['themeColor'])
    },
    mounted() {
        this.handleSelect();
        this.getTable();
    },

    methods: {
        getTable() {
            this.loading = true;
            this.queryList.page = this.pagination.page
            this.queryList.page_size = this.pagination.rowsPerPage
            getMsgList(this.queryList).then(res => {
                this.pagination.rowsNumber = res.totalCounts
                if (res.status == 200) {
                    this.dataList = [];
                    res.data.map((item, i) => {
                        let obj = {
                            idNum: i + 1,
                            id: item.id,
                            content: item.content,
                            is_read: item.is_read,
                            title: item.title,
                            create_time: getNowFormatDate(new Date(item.create_time)),
                        }
                        this.dataList.push(obj)
                    })
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            })
        },
        // 一条消息已读
        readClick(item) {
            addRead(item.row.id, '').then(res => {
                if (res.status == 200) {
                    this.$q.notify({
                        type: 'positive',
                        position: 'top',
                        message: `消息已读成功！`
                    })
                    if (this.pagination.page > 1 && this.pagination.rowsNumber % this.pagination.rowsPerPage === 1) {
                        this.pagination.page -= 1
                    }
                    this.getTable()
                    this.$store.dispatch('customMenu/alarm', '')
                }
            })
        },
        // 全部已读
        readAllClick() {
            addReadAll('').then(res => {
                if (res.status == 200) {
                    this.$q.notify({
                        type: 'positive',
                        position: 'top',
                        message: `全部消息已读成功！`
                    })
                    this.getTable()
                    this.$store.dispatch('customMenu/alarm', '')
                }
            })
        },
        // 切换当前页数
        updatePage(val) {
            if (!val) return
            this.pagination.page = val * 1
            this.getTable();
        },
        // 切换每页的行数
        updateSizes(val) {
            this.pagination.rowsPerPage = parseFloat(val)
            this.getTable();
        },
        // 表头选择
        handleSelect() {
            this.visibleColumns = []
            this.columns.forEach((item, index) => {
                if (index < 8) {
                    this.visibleColumns.push(item.name)
                }
            })
        },
        handlerSortup(val) {
            if(val == 'idNum') {
                this.queryList.ordering = 'id'
            }else{  
                this.queryList.ordering = val
            }
            this.upSort = 1;
            this.DownSort = 0;
            this.downName = val;
            this.getTable()
        },
        handlerSortdown(val) {
            if(val == 'idNum') {
                this.queryList.ordering = '-id'
            }else{  
                this.queryList.ordering = '-' + val
            }
            this.upSort = 0;
            this.DownSort = 1;
            this.downName = val;
            this.getTable()
        },
        searchShowClick() {
            this.searchShow = !this.searchShow
        },
        /**
         * 搜索
         */
        handlerSearch() {
            this.pagination.page = 1
            this.getTable();
        },
        handlerRefresh() {
            this.handleResetSearch()
        },
        /**
         * 复位搜索
         */
        handleResetSearch() {
            this.pagination = {
                sortBy: 'desc',
                descending: false,
                page: 1,
                rowsPerPage: 10
            }
            this.queryList = {
                page: 1,
                page_size: 10,
                ordering: '-create_time',
                is_read : 0,
            }
            this.headerSeach = ''
            this.downName = ''
            this.getTable();
        },
    }
}

</script>
<style lang='scss' scoped>
.input {
    margin-top: 10px;
    flex-wrap: nowrap;
    span {
        width: 80px;
        margin-top: 10px;
    }
    input {
        height: 40px;
        border: 1px solid #cac5c5;
        border-radius: 8px;
        padding-left: 10px;
    }
}
.item {
    min-height: 40px;
    color: #666666;
    line-height: 40px;
    .one {
        width: 128px;
        margin-left: -5px;
        padding-right: 10px;
        border-right: 1px solid #ededed;
    }
    .Two {
        margin-left: 10px;
        max-width: 200px;
        word-break: break-all;
    }
}
.sortSpan {
  display: inline-block;
  width: 30px;
  position: relative;
  .icon2 {
    position: absolute;
    left: 0;
    top: -8px;
  }
  .icon1 {
    position: absolute;
    left: 0;
    bottom: 3px;
  }
  .sortIcon {
    color: black !important;
  }
}
</style>
